<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .send{
           width: 230px;
           height: 80px;
           border: 1px solid #FDA729;
           position: relative;
       }
       .send textarea{
           width: 100%;
           height: 100%;
           padding: 5px;
           outline: none;
           resize: none;
           box-sizing:border-box;
       }
       .send button{
           width:60px;
           height: 30px;
           color: white;
           background-color: #77A2DC;
           position: absolute;
           bottom: -30px;
           right: -2px;
           border: none;
        }
        .send button:focus{
           border: none;
           outline: none;
        }
        .list{
           width: 230px;
           height: 300px;
           border: 1px solid #77A2DC;
        }
        .list .item{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="app">
         <Child :cclick="pclick" :name="name"></Child>
         <input type="text" name="" id="" v-model="username" placeholder="请输入你的名字">
         <container-box :username="username"></container-box>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    // 父组件传值子组件  通过标签直接传  子传父 通过标签绑定事件
    Vue.component('Child',{
        template:`<div> <div class="box" @click="handerthisclick">我是子组件---{{ name }}</div></div>`,
        data(){
            return{
                  
            }
        },
        methods:{
            handerthisclick(){
               this.$root.pclick({name:"翠花"})
               this.$emit('cclick');
            }
        },
        props:[
            'name',
        ]
    })
    
    //案列：评论系统=====组件规划   1：展示组件 负责展示数据  2：发表组件负责发表评论 3：父组件，负责数据中转
    //父组件
    Vue.component('container-box',{
        name:"container",
        template:'<div class=""><ListData :list="list"></ListData><SendMsg :sendList="getList"></SendMsg></div>',
        data(){
            return {
                list:[]
            }
        },
        methods:{
            getList(data){
                this.list.push({
                    name:this.username,
                    msg:data
                })
            }
        },
        props:[
            'username'
        ]
    })
    //发表组件
    Vue.component('SendMsg',{
        template:`<div class="send"><textarea v-model="msg"></textarea><button @click="sendmsg">发表</button></div>`,
        data(){
            return {
               msg:""
            }
        },
        methods:{
            sendmsg(){
                if (this.msg) {
                    this.$parent.getList(this.msg);
                    this.msg = ""
                }else{
                    alert('内容不能为空')
                }
                
            }
        }
    })
    //展示组件
    Vue.component('ListData',{
        template:`<div class="list"><div class="item" v-for="v in list">{{ v.name }} : {{ v.msg }}</div></div>`,
        data(){
            return {
                
            }
        },
        methods:{
 
        },
        props:[
            'list'
        ]
    })
    const app = new Vue({
        el:"#app",
        data:{
           name:"小李",
           username:""      
        },
        methods:{
            pclick(data){
                console.log('父组件方法正在被调用')
                console.log(data)
                this.name = data.name
            }
        }
    })
    
    
    </script>
</body>
</html>